<template>
  <div>
    <top-bar/>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item" alt=""/>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <div class="enter_main" v-show="totalFloor.length>0">
      <div class="current_floor">
        当前显示{{ floorIndex }}
      </div>
      <div class="enter_car_enter">
        <div class="floor_area">
          <!--        <img src="@/assets/enterPark/houseTop.png" style="width: 150px;margin-bottom: -10px;">-->
          <div v-for="(item,index) in totalFloor" :key="index" class="floor_button" @click="toFloorDetail(item,index)">
            <!--          <img src="@/assets/enterPark/floor.png">-->
            <!--          <span class="floor_number">{{index+1}}</span>-->
            <el-button type="primary" :disabled="item.isLock=='N'">{{ item.name }}
            </el-button>
          </div>
        </div>
        <div class="spot_area">
          <div class="spot_item" v-for="(item,index) in spotInfo" :key="index" @click="goToEnter(item,index)">
            <img src="@/assets/enterPark/spotDisable.png" v-show="item.isHaveUser=='1'" class="spot_disable">
            <img src="@/assets/enterPark/spotEmpty.png" v-show="item.isHaveUser=='0'" class="spot_empty">
            <span class="spot_code">{{item.code}}</span>
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="isEnterPark" @close="submitUpdate" :show-close="false">
        <el-date-picker
          v-model="warehousingTime"
          type="datetime"
          placeholder="请选择入库时间"
          default-time="12:00:00">
        </el-date-picker>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import topBar from "../components/topBar.vue";
import {swiper, swiperSlide} from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import "@/assets/font_4479788_ky6fdzprg/iconfont.css";

export default {
  components: {
    topBar,
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },

        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        }
      },
      floorIndex: '',
      totalFloor: [],
      spotInfo: [],
      warehousingTime: '',
      isEnterPark: false,
      chooseId: '',
      chooseItem: '',
      chooseIndex: '',
      swiperList: ['https://img2.baidu.com/it/u=3297112575,3493860739&fm=253&fmt=auto&app=138&f=JPEG?w=960&h=337', 'https://img2.baidu.com/it/u=872065074,3726629174&fm=253&fmt=auto&app=138&f=JPEG?w=910&h=365'],
    }
  },
  mounted() {
    this.queryFloorNum()

  },
  methods: {
    queryFloorNum(onsucc) {
      let that = this
      this.$axios.get('system/floor/list?pageNum=1&pageSize=10', null).then((res) => {
        if (res.data.code == 200) {
          console.log(res)
          let firstFloor = res.data.rows
          that.totalFloor = res.data.rows
          that.totalFloor = that.totalFloor.reverse()
          let flag = 0
          firstFloor.forEach((item, index) => {
            if (item.isLock == "Y"&&flag==0) {
              flag++
              that.toFloorDetail(item, index)
              return false
            }
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '获取楼层信息失败！'
          });
        }
      }).catch((error) => {
        this.$notify.error({
          title: '错误',
          message: '获取楼层信息失败！'
        });
      });
    },
    toFloorDetail(item, index) {
      let that = this
      that.chooseItem = item
      that.chooseIndex = index
      this.floorIndex = item.name
      if (item.isLock == 'N') {
        this.$notify.error({
          title: '提示',
          message: '当前楼层已锁定，暂不可用'
        });
      } else {
        this.$axios.get('system/floor/' + item.id, null).then((res) => {
          if (res.data.code == 200) {
            console.log(res)
            that.spotInfo = res.data.data.sysParkSpotList
          } else {
            this.$notify.error({
              title: '错误',
              message: '获取楼层详细信息失败！'
            });
          }
        }).catch((error) => {
          this.$notify.error({
            title: '错误',
            message: '获取楼层详细信息失败！'
          });
        });
      }
    },
    goToEnter(item, index) {
      let that = this
      if (item.isHaveUser == '1') {
        this.$notify.error({
          title: '提示',
          message: '当前车位已被使用，请选择其他车位！'
        });
        return
      } else if (item.isLock == 'N') {
        this.$notify.error({
          title: '提示',
          message: '抱歉，当前车位暂不可用！请选择其他车位。'
        });
      } else {
        this.$confirm('当前车位每小时'+item.price+'元是否选择停车', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          that.isEnterPark = true
          that.chooseId = item.code
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });



      }
    },
    submitUpdate() {
      let that = this
      let param = {
        spotCode: this.chooseId,
        warehousingTime: this.warehousingTime
      }
      this.$axios.post('system/userSpotInfo/putIntoStorage', param, {
        headers: {
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then((data) => {
        if (data.data.code == 200) {
          this.$message({
            message: '停车成功',
            type: 'success'
          });
          that.toFloorDetail(that.chooseItem, that.chooseIndex)
        } else {
          if (data.data.msg) {
            this.$message.error(data.data.msg);
          } else {
            this.$message.error('选择车位失败，请重试！');
          }
          this.getCaptchaImage()
        }
      }).catch((error) => {
        this.$message.error('选择车位失败，请重试！');
      });
    }
  }
}
</script>

<style scoped>
.swiper-main {
  width: 100%;
  height: 500px;
  background-color: #f4f4f4;
}

.swiper-container {
  width: 100%;
  height: 500px;
  background-color: #f4f4f4;
}

.swiper-container img {
  width: 100%;
  height: 500px;
}

::v-deep .swiper-pagination-bullet-active {
  background-color: #b0352f;
}

.floor_area {
  padding: 30px;
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.floor_button {
  margin-bottom: 20px;
}

.enter_main {
  background-color: aliceblue;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

.enter_car_enter {
  display: flex;
}

.floor_number {
  position: absolute;
}

.el-button {
  width: 200px;
}

.spot_area {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}

.spot_item {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.current_floor {
  display: flex;
  justify-content: center;
  font-size: 30px;
  color: #8a8a8a;
  font-weight: bold;
}

.spot_empty {
  cursor: pointer;
}
.el-input{
  width: 100%;
}
</style>
